<template>
	<view>
		<view class="content">
			<view class="input-group">
				<view class="input-row border">
					<view class="content-tab">
						<text class="title">名</text>
						<text class="title">称</text>
					</view>
					<input type="text" v-model="goodsInfo.name" placeholder="请输入商品名称">
				</view>
				<view class="input-row border">
					<view class="content-tab">
						<text class="title">类</text>
						<text class="title">别</text>
					</view>
					<picker mode="selector"  @change="clickPicker" :range="category">{{goodsInfo.category}}</picker>
				</view>
				<view class="input-row border">
					<view class="content-tab">
						<text class="title">规</text>
						<text class="title">格</text>
					</view>
					<input type="text" v-model="goodsInfo.standard" placeholder="请输入商品规格">
				</view>
				<view class="input-row border">
					<view class="content-tab">
						<text class="title">价</text>
						<text class="title">格</text>
					</view>
					<input type="text" v-model="goodsInfo.price" placeholder="请输入商品价格">
				</view>
				<view class="input-row border">
					<view class="content-tab">
						<text class="title">库</text>
						<text class="title">存</text>
					</view>
					<input type="text" v-model="goodsInfo.stock" placeholder="请输入商品库存">
				</view>
			</view>
			<view >
				<view>图片上传（选填）</view>
				<view class="img-box">
					<view v-if="src_list.length!=0" v-for="(item,index) in src_list" :key="index">
						<image :src="item" class="addpic" @longpress="delImg(index)"
							@tap="previewPict(index)"></image>
					</view>
					
						<image src="../../../../static/picture.png" class="addpic" @click="choosePict()"></image>
					
				</view>
			</view>
			<view class="btn-row">
				<button type="primary"  class="primary" @click="uploadInfo">上传商品信息</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: "../../../../static/picture.png",
				src_list: [

				],
				category:['学习用品','纸张本册','书写工具','收纳整理'],
				index: -1,
				goodsInfo: {
					name: '',
					category: '类别',
					standard: '',
					price: 0,
					stock: 0,
					picture: []
				}
			}
		},
		methods: {
			choosePict() {
				uni.chooseImage({
					count: 9,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						if (this.src_list.length != 0) {
							this.src_list = this.src_list.concat(tempFilePaths);
						} else {
							this.src_list = tempFilePaths
						}
					}
				});
			},
			delImg(index) {
				uni.showModal({
					title: '删除照片',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.src_list.splice(index, 1)
						}
					}
				})
			},
			previewPict(index) {
				uni.previewImage({
					urls: this.src_list,
					current: index,
					success: (res) => {
						console.log(res)
					}
				})
			},
			
			async uploadImg() {
				let str=this.goodsInfo.name;
				this.goodsInfo.name=this.goodsInfo.name.replace(/\s*/g,"")
				// let url='http://127.0.0.1:8000';  //本地调试地址。
				let url='http://81.68.232.29:8000';
				url+='/product/upload_pict/'
				str = str.replace(/\s*/g,"");
				let count;
				for (count = 0; count < this.src_list.length; count++) {
					await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: url,
							filePath: this.src_list[count],
							name: 'files',
							formData: {
								'name': str + count
							},
							success: (res) => {
								let result = JSON.parse(res.data)
								console.log(res);
								this.goodsInfo.picture.push(result['url']);
								resolve();
							}
						});
					});
				}
			},
			uploadInfo() {
				Promise.all([this.uploadImg()])
					.then(res => {
						console.log(this.goodsInfo)
						let data = JSON.stringify(this.goodsInfo)
						console.log(data)
						const goods = this.$myRequest({
							url: '/product/add_newgoods/',
							data: this.goodsInfo
						}).then(res => {
							uni.showToast({
								title:'上架成功',
								icon:'success',
								success: (rs) => {
									uni.navigateBack({
										delta:1
									});
								}
							})
						})
					})
			},
			clickPicker(event){
				console.log(event);
				this.goodsInfo.category=this.category[Number(event.detail.value)]
				console.log(this.goodsInfo)
			}
		}
	}
</script>

<style>
	@import url("../../../../common/denglu.css");

	.content-tab {
		display: flex;
		width: 4em;
		justify-content: space-between;
	}

	.input-row input {
		margin-left: 15upx;

	}
	
	.img-box{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		/* justify-content: space-around; */
		align-items: flex-start;
	}
	.addpic{
	  width: 40px;
	  height: 40px;
	}
	
	.addPics{
	  width: 100%;
	  display: flex;
	  flex-direction: row;
	  white-space: pre-wrap;
	}
</style>
